        @extends('backend.layouts.default')

        @section('title')网站统计@endsection

        @section('brief')网站访问统计数据@endsection

        @section('content')
            @include('backend.commons.sidebar')
            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <!-- BEGIN CONTENT BODY -->
                <div class="page-content">
                     <!-- BEGIN PAGE HEADER-->
                    @include('backend.commons.title')
                    <div class="page-bar">
                        <ul class="page-breadcrumb">
                            <li>
                                <i class="icon-home"></i>
                                <a href="{{ url('/admin/dashboard') }}">管理首页</a>
                                <i class="fa fa-angle-right"></i>
                            </li>
                            <li>
                                <span>@yield('title')</span>
                            </li>
                        </ul>
                    </div>
                    <!-- END PAGE HEADER-->
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <!-- BEGIN PORTLET-->
                            <div class="portlet light ">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <i class="icon-bar-chart font-dark hide"></i>
                                        <span class="caption-subject font-dark bold uppercase">访客统计</span>
                                        <span class="caption-helper">最近14天数据</span>
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div id="visitor_loading">
                                        <img src="{{ config('app.static_url') }}assets/global/img/loading.gif" alt="loading" />
                                    </div>
                                    <div id="visitor_content" class="display-none">
                                        <div id="visitor_statistics" class="chart"> </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END PORTLET-->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <!-- BEGIN PORTLET-->
                            <div class="portlet light ">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <i class="icon-bar-chart font-dark hide"></i>
                                        <span class="caption-subject font-dark bold uppercase">页面统计</span>
                                        <span class="caption-helper">最近14天数据</span>
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div id="pv_loading">
                                        <img src="{{ config('app.static_url') }}assets/global/img/loading.gif" alt="loading" />
                                    </div>
                                    <div id="pv_content" class="display-none">
                                        <div id="pv_statistics" class="chart"> </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END PORTLET-->
                        </div>
                    </div>
                </div>
                <!-- END CONTENT BODY -->
            </div>


            @push('scripts')
            <script src="{{ config('app.static_url') }}assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
            <script src="{{ config('app.static_url') }}assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
            <script src="{{ config('app.static_url') }}assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>

            <script>

                function showChartTooltip(x, y, xValue, yValue) {
                    $('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({
                        position: 'absolute',
                        display: 'none',
                        top: y - 40,
                        left: x - 40,
                        border: '0px solid #ccc',
                        padding: '2px 6px',
                        'background-color': '#fff'
                    }).appendTo("body").fadeIn(200);
                }

                /*---------------------------
                 |
                 | 访客统计
                 |
                 */

                var visitors = [];
                var loadVisitorStatisticsFunc = function() {
                    $.ajax({
                        url: '{{ url('/admin/analytics/visitor_statistics') }}',
                        type: 'get',
                        dataType: 'json',
                        success: function(data) {
                            // console.log(data);
                            visitors = data;
                            randerVisitor();
                        }
                    });
                };

                var randerVisitor = function() {
                    var plot_statistics = $.plot($("#visitor_statistics"), [{
                        data: visitors,
                        lines: {
                            fill: 0.6,
                            lineWidth: 0
                        },
                        color: ['#f89f9f']
                    }, {
                        data: visitors,
                        points: {
                            show: true,
                            fill: true,
                            radius: 5,
                            fillColor: "#f89f9f",
                            lineWidth: 3
                        },
                        color: '#fff',
                        shadowSize: 0
                    }],

                    {
                        xaxis: {
                            tickLength: 0,
                            tickDecimals: 0,
                            mode: "categories",
                            min: 0,
                            font: {
                                lineHeight: 14,
                                style: "normal",
                                variant: "small-caps",
                                color: "#6F7B8A"
                            }
                        },
                        yaxis: {
                            ticks: 5,
                            tickDecimals: 0,
                            tickColor: "#eee",
                            font: {
                                lineHeight: 14,
                                style: "normal",
                                variant: "small-caps",
                                color: "#6F7B8A"
                            }
                        },
                        grid: {
                            hoverable: true,
                            clickable: true,
                            tickColor: "#eee",
                            borderColor: "#eee",
                            borderWidth: 1
                        }
                    });


                    var previousPoint = null;
                    $("#visitor_statistics").bind("plothover", function(event, pos, item) {
                        $("#x").text(pos.x.toFixed(2));
                        $("#y").text(pos.y.toFixed(2));
                        if (item) {
                            if (previousPoint != item.dataIndex) {
                                previousPoint = item.dataIndex;

                                $("#tooltip").remove();
                                var x = item.datapoint[0].toFixed(2),
                                    y = item.datapoint[1].toFixed(2);

                                showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + ' 访客');
                            }
                        } else {
                            $("#tooltip").remove();
                            previousPoint = null;
                        }
                    });
                };

                /*---------------------------
                 |
                 | PV 统计
                 |
                 */
                var pvs = [];
                var loadPVStatisticsFunc = function() {
                    $.ajax({
                        url: '{{ url('/admin/analytics/pv_statistics') }}',
                        type: 'get',
                        dataType: 'json',
                        success: function(data) {
                            // console.log(data);
                            pvs = data;
                            randerPV();
                        }
                    });
                };

                var randerPV = function() {
                    var plot_statistics = $.plot($("#pv_statistics"), [{
                        data: pvs,
                        lines: {
                            fill: 0.6,
                            lineWidth: 0
                        },
                        color: ['#1BBC9B']
                    }, {
                        data: pvs,
                        points: {
                            show: true,
                            fill: true,
                            radius: 5,
                            fillColor: "#1BBC9B",
                            lineWidth: 3
                        },
                        color: '#fff',
                        shadowSize: 0
                    }],

                    {
                        xaxis: {
                            tickLength: 0,
                            tickDecimals: 0,
                            mode: "categories",
                            min: 0,
                            font: {
                                lineHeight: 14,
                                style: "normal",
                                variant: "small-caps",
                                color: "#6F7B8A"
                            }
                        },
                        yaxis: {
                            ticks: 5,
                            tickDecimals: 0,
                            tickColor: "#eee",
                            font: {
                                lineHeight: 14,
                                style: "normal",
                                variant: "small-caps",
                                color: "#6F7B8A"
                            }
                        },
                        grid: {
                            hoverable: true,
                            clickable: true,
                            tickColor: "#eee",
                            borderColor: "#eee",
                            borderWidth: 1
                        }
                    });

                    var previousPoint = null;
                    $("#pv_statistics").bind("plothover", function(event, pos, item) {
                        $("#x").text(pos.x.toFixed(2));
                        $("#y").text(pos.y.toFixed(2));
                        if (item) {
                            if (previousPoint != item.dataIndex) {
                                previousPoint = item.dataIndex;

                                $("#tooltip").remove();
                                var x = item.datapoint[0].toFixed(2),
                                    y = item.datapoint[1].toFixed(2);

                                showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + ' 页面');
                            }
                        } else {
                            $("#tooltip").remove();
                            previousPoint = null;
                        }
                    });
                };


                $(function() {
                    if ($('#visitor_statistics').size() != 0) {
                        $('#visitor_loading').hide();
                        $('#visitor_content').show();
                    }

                    if ($('#pv_statistics').size() != 0) {
                        $('#pv_loading').hide();
                        $('#pv_content').show();
                    }

                    loadVisitorStatisticsFunc();
                    loadPVStatisticsFunc();
                });
            </script>
            @endpush
        @endsection